<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>微信支付</title>
  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
    /* CSS RESET */
    * {
      padding: 0;
      margin: 0;
    }

    body {
      font: 12px "微软雅黑", Arial;
      background: #efeff4;
      min-width: 320px;
      max-width: 640px;
      color: #000;
    }

    a {
      text-decoration: none;
      color: #666666;
    }

    a, img {
      border: none;
    }

    img {
      vertical-align: middle;
    }

    ul, li {
      list-style: none;
    }

    em, i {
      font-style: normal;
    }

    .clear {
      clear: both
    }

    .clear_wl:after {
      content: ".";
      height: 0;
      visibility: hidden;
      display: block;
      clear: both;
    }

    .fl {
      float: left
    }

    .fr {
      float: right
    }

    .all_w {
      width: 91.3%;
      margin: 0 auto;
    }

    /*基础字体属性*/
    .f10 {
      font-size: 10px
    }

    .f11 {
      font-size: 11px
    }

    .f12 {
      font-size: 12px
    }

    .f14 {
      font-size: 14px
    }

    .f13 {
      font-size: 13px
    }

    .f16 {
      font-size: 16px
    }

    .f18 {
      font-size: 18px
    }

    .f20 {
      font-size: 20px
    }

    .f22 {
      font-size: 22px
    }

    .f24 {
      font-size: 24px
    }

    .f26 {
      font-size: 26px
    }

    .f28 {
      font-size: 28px
    }

    .f32 {
      font-size: 32px
    }

    .fb {
      font-weight: bold
    }

    /********/
    .gofh {
      float: left;
      height: 45px;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
    }

    .gofh a {
      padding-right: 10px;
      border-right: 1px solid #2e2f33;
    }

    .gofh a img {
      width: 40%;
    }

    .ttwenz {
      float: left;
      height: 45px;
    }

    .ttwenz h4 {
      font-size: 16px;
      font-weight: 400;
      margin-top: 2px;
    }

    .ttwenz h5 {
      font-size: 12px;
      font-weight: 400;
      color: #6c7071;
    }

    .wenx_xx {
      text-align: center;
      font-size: 16px;
      padding: 18px 0;
    }

    .wenx_xx .wxzf_price {
      font-size: 45px;
    }

    .skf_xinf {
      height: 43px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      line-height: 43px;
      background: #FFF;
      font-size: 12px;
      overflow: hidden;
    }

    .skf_xinf .bt {
      color: #767676;
      float: left;
    }

    .ljzf_but {
      border-radius: 3px;
      height: 45px;
      line-height: 45px;
      background: #44bf16;
      display: block;
      text-align: center;
      font-size: 16px;
      margin-top: 14px;
      color: #fff;
    }

    /**/
    .ftc_wzsf {
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
    }

    .ftc_wzsf .hbbj {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 8;
      background: #000;
      opacity: 0.4;
      top: 0;
      left: 0;
    }

    .ftc_wzsf .srzfmm_box {
      position: absolute;
      z-index: 10;
      background: #f8f8f8;
      width: 88%;
      left: 50%;
      margin-left: -44%;
      top: 25px;
    }

    .qsrzfmm_bt {
      font-size: 16px;
      border-bottom: 1px solid #c9daca;
      overflow: hidden;
    }

    .qsrzfmm_bt a {
      display: block;
      width: 10%;
      padding: 10px 0;
      text-align: center;
    }

    .qsrzfmm_bt img.tx {
      width: 10%;
      padding: 10px 0;
    }

    .qsrzfmm_bt span {
      padding: 15px 5px;
    }

  </style>
</head>
<body>
<div class="wenx_xx">
  <div class="mz">微信安全支付</div>
  <div class="wxzf_price">￥{$money}</div>
</div>
<div class="skf_xinf">
  <div class="all_w"><span class="bt">收款方</span> <span class="fr">{$name}</span></div>
</div>
<a onclick="onBridgeReady();" class="ljzf_but all_w">立即支付</a>
<script>
  function onBridgeReady() {
    WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId": "{$res.appId}",
              "timeStamp": "{$res.timeStamp}",
              "nonceStr": "{$res.nonceStr}",
              "package": "{$res.package}",
              "signType": "{$res.signType}",
              "paySign": "{$res.paySign}"
            },
            function (res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                alert('支付成功！');
                WeixinJSBridge.call('closeWindow');
              }
            });
  }
</script>
</body>
</html>